<template>
  <nut-form ref="formRef" :model="localForm" :disabled="!props.showButtons" class="max-w-[700rpx] w-full mx-auto box-border pgs">
    <template v-for="(cfg, key) in fieldConfig" :key="key">
      <template v-if="cfg.show && cfg.edit !== false">
        <nut-form-item :label="cfg.label" class="flex mb-[24rpx] items-start">
          <template #label>
            <view class="w-[132rpx] pt-[10rpx] text-[30rpx] text-gray-700">{{ cfg.label }}</view>
          </template>
          <template v-if="cfg.type === 'textarea'">
            <nut-textarea
              v-model="localForm[key]"
              :placeholder="'请输入' + cfg.label"
              class="flex-1 px-[24rpx] py-[20rpx] rounded-[12rpx] bg-gray-50 border border-gray-200 focus:border-blue-500 text-[30rpx] box-border min-h-[240rpx]"
              autosize
              rows="3"
              style="resize: none"
            />
          </template>
          <template v-else-if="cfg.type === 'boolean'">
            <nut-switch v-model="localForm[key]" activeColor="#2196F3" inactiveColor="#e5e7eb" class="scale-125 ml-[8rpx] mt-[10rpx]" />
          </template>
          <template v-else-if="cfg.type === 'picker'">
            <view class="flex-1">
              <view class="w-full h-[80rpx] px-[24rpx] flex items-center rounded-[12rpx] bg-gray-50 border border-gray-200 text-[30rpx] box-border cursor-pointer" @tap="openPicker(key)">
                <text :class="localForm[key] ? 'text-gray-900' : 'text-gray-400'">{{ getDisplayText(key, cfg) || "请选择" + cfg.label }}</text>
                <IconFont name="arrow-down" class="ml-auto" />
              </view>
              <nut-popup v-model:visible="pickerVisible[key]" position="bottom">
                <nut-picker v-model="pickerValue[key]" :columns="[cfg.options || []]" @confirm="onPickerConfirm(key, $event)" @cancel="pickerVisible[key] = false" :title="'请选择' + cfg.label" />
              </nut-popup>
            </view>
          </template>
          <template v-else-if="cfg.type === 'radio'">
            <nut-radio-group v-model="localForm[key]" direction="horizontal">
              <nut-radio v-for="opt in cfg.options" :key="opt" :label="opt" class="mr-[24rpx] text-blue-600">{{ opt }}</nut-radio>
            </nut-radio-group>
          </template>
          <template v-else-if="cfg.type === 'checkbox'">
            <nut-checkbox-group v-model="localForm[key]" direction="horizontal">
              <nut-checkbox v-for="opt in cfg.options" :key="opt" :label="opt" class="mr-[24rpx] text-blue-600">{{ opt }}</nut-checkbox>
            </nut-checkbox-group>
          </template>
          <template v-else>
            <nut-input
              v-model="localForm[key]"
              :placeholder="'请输入' + cfg.label"
              :type="cfg.type === 'number' ? 'number' : 'text'"
              class="flex-1 px-[24rpx] py-[20rpx] bg-[#e0e0e0] rounded-[12rpx] bg-gray-50 border border-gray-200 focus:border-blue-500 text-[30rpx] box-border h-[80rpx]"
            />
          </template>
        </nut-form-item>
      </template>
    </template>
    <view class="mt-[48rpx] flex gap-[24rpx]" v-if="props.showButtons">
      <nut-button block type="default" class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1" @click="resetForm">重置</nut-button>
      <nut-button block type="primary" class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1 bg-blue-500 hover:bg-blue-600 active:bg-blue-700" @click="submitForm">保存</nut-button>
    </view>
  </nut-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { cloneDeep } from 'lodash-es';
import { IconFont } from '@nutui/icons-vue-taro'

// import Taro from "@tarojs/taro";
// import { healthSocialInfoFields as fieldConfig } from './fields'
const props = defineProps<{
  fieldConfig: any;
  form: any;
  showButtons?: boolean;
}>();

const localForm = ref(cloneDeep(props.form));
const emit = defineEmits<{
  (e: "submit", form: any, fieldConfig: any): void;
}>();
// const form = reactive<any>({});
const formRef = ref();
const pickerVisible = reactive<any>({});
const pickerValue = reactive<any>({});

// 获取显示文本
const getDisplayText = (key: any, cfg: any) => {
  if (!localForm.value[key]) return '';
  const option = cfg.options?.find((item: any) => item.value === localForm.value[key]);
  return option ? option.text : String(localForm.value[key]);
};

function resetForm() {
  Object.keys(props.fieldConfig).forEach((key) => {
    if (props.fieldConfig[key].show) localForm.value[key] = "";
  });
}
function submitForm() {
  // 校验和保存逻辑
  //   Taro.showToast({ title: '保存成功', icon: 'success' })
  console.log("localForm", localForm.value)
  emit("submit", localForm.value, props.fieldConfig);
}
function openPicker(key: any) {
  if (props.showButtons === false) return;
  pickerVisible[key] = true;
  // 初始化pickerValue
  pickerValue[key] = [localForm.value[key]];
}
function onPickerConfirm(key: any, value: any) {
  console.log("value", value, key)
  if (value.selectedOptions && value.selectedOptions.length > 0) {
    localForm.value[key] = value.selectedOptions[0].value;
  }
  pickerVisible[key] = false;
}
</script>

<style lang="scss">
.pgs {
  .nut-textarea {
    background-color: #f9fafb !important;
    padding: 4rpx 20rpx !important;
    border-radius: 12rpx !important;
  }

  .nut-input {
    background-color: #f9fafb !important;
    padding: 4rpx 20rpx !important;
    border-radius: 12rpx !important;
  }
}
</style>
